<template>
    <section class="headinfo" v-if="expert">
        <img :src="expert.avatar||'//common-1253410441.file.myqcloud.com/coverimg/20170621164206.png'" :alt="expert.nick">
        <div class="middleinfo">
            <strong>{{expert.nick}}</strong>
            <span><b v-if="expert.combo>0">{{expert.combo}}连红</b><b v-if="expert.state">{{expert.state}}</b></span>
        </div>
        <div class="rightop">
            <em v-if="!expert.zj" @click="attentionfn">
                <a v-if="expert.followed" href="javascript:;">
                    <icon name="dui"/>
                    已关注</a>
                <a v-else href="javascript:;">
                    <icon name="plus"/>
                    关注</a></em>
        </div>
    </section>
</template>

<script>
    import {getMytoken} from '../service/common';
    import {godFollowR} from '../service/god';
    export default {
        name: 'Headinfo',
        props: ['expert', 'attentionfn'],
        data () {
            return {}
        },
        methods: {
            async followgod(){
//                const {followed, uid}=this.expert;
//                const {token}=await getMytoken();
//                if(!token) {
//                    this.$vux.toast.text('未获取到用户信息');
//                    return;
//                }
//                const {data}=await godFollowR({follow: followed, token, godid: uid});
//                if(data && data.code == 0) {
//                    this.godInfo.followed = !followed;
//                }
//                else {
//                    this.$vux.toast.text(data.msg);
//                }
            }
        }
    }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
    @import "../router/app.less";

    .headinfo {
        align-items: center;
        display: flex;
        flex: 1;
        img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 2px solid #fff;
            margin-right: 20px;
        }
        .middleinfo {
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: center;
            strong {
                color: #333;
                font-size: @fz32;
                font-weight: bold;
            }
            span {
                margin-top: 10px;
                b {
                    padding: 0 20px;
                    height: 26px;
                    color: @color22;
                    border: 1px solid @color22;
                    border-radius: 26px;
                    margin-right: 20px;
                    text-align: center;
                }
            }
        }
        .rightop {
            display: flex;
            flex-direction: column;
            em {
                height: 50px;
            }
            a {
                height: 50px;
                background: @colororange;
                color: #fff;
                text-align: center;
                line-height: 50px;
                font-size: @fz26;
                padding: 0 14px;
                border-radius: 4px;
                margin-bottom: 15px;
                display: flex;
                justify-content: center;
                align-items: center;
                svg {
                    width: 30px;
                    height: 30px;
                }
            }
            span {
                font-size: @fz24;
            }
        }
    }
</style>
